<template>
    <el-card shadow="never" :body-style="{ padding: '20px' }">
        <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
            <el-form-item label="维护车辆">
                <el-input v-model="form.license" readonly />
            </el-form-item>
            <el-form-item label="维护名称">
                <el-select v-model="form.maintain" placeholder="选择维护名称">
                    <el-option :label="item.category" :value="item.category" v-for="item in catelist" />
                </el-select>
            </el-form-item>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item label="道路运输">
                        <el-date-picker v-model="form.convey" type="date" placeholder="请选择道路运输到期时间" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="交强险">
                        <el-date-picker v-model="form.mandatory" type="date" placeholder="请选择交强险时间" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12" :offset="0">
                    <el-form-item label="商业险">
                        <el-date-picker v-model="form.business" type="date" placeholder="请选择商业险时间" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="12" :offset="0">
                    <el-form-item label="钢瓶到期">
                        <el-date-picker v-model="form.steel" type="date" placeholder="请选择钢瓶到期时间" clearable />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="年审到期">
                <el-date-picker v-model="form.annual" type="date" placeholder="请选择年审到期时间" clearable />
            </el-form-item>
            <el-form-item label="需要报销吗?">
                <el-switch :active-value="true" :inactive-value="false" @change="handleChange" v-model="form.isFin">
                </el-switch>
            </el-form-item>
            <!-- 是否报销 -->
            <div v-if="form.isFin">
                <el-form :model="formExp" label-width="120px" :rules="rules">
                    <el-form-item label="支出金额" prop="money">
                        <el-input v-model.number="formExp.money" placeholder="请输入支出金额" />
                    </el-form-item>
                    <el-row :gutter="20">
                        <el-col :span="8" :offset="0">
                            <el-form-item label="微信" prop="wechat">
                                <el-input v-model.number="formExp.wechat" placeholder="微信付款" @change="handleInput()" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            <el-form-item label="支付宝" prop="alipay">
                                <el-input v-model.number="formExp.alipay" placeholder="支付宝付款" @change="handleInput()" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="8" :offset="0">
                            <el-form-item label="现金" prop="cash" placeholder="现金付款">
                                <el-input v-model.number="formExp.cash" @change="handleInput()" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" :offset="0">
                            <el-form-item label="其他支付" prop="rests" placeholder="其他方式付款">
                                <el-input v-model.number="formExp.rests" @change="handleInput()" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="欠费金额">
                        <el-input v-model.number="formExp.Arrearage" readonly />
                    </el-form-item>
                    <el-form-item label="支出时间" prop="Exptime">
                        <el-date-picker v-model="formExp.time" type="date" placeholder="请选择支出时间" clearable />
                    </el-form-item>
                    <el-form-item label="支出备注">
                        <el-input type="textarea" v-model="formExp.descr" placeholder="请输入支出备注内容" />
                    </el-form-item>
                </el-form>
                <div class="tip-box">
                    请输入各类支付方式，支出金额会自动计算
                </div>
            </div>

            <el-form-item>
                <el-button type="primary" @click="onSubmit">提交</el-button>
                <el-button>重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { CateGet, MainAdd } from '../../../api/car';
import { CarTypes, MainType } from '../../../types/car';
import { ElMessage } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import { ExpenType } from '../../../types/expenditure'
import { ExpenPost } from '../../../api/expenditure';

interface EmitType {
    (agr: 'update:modelValue', bool: boolean): void
}
const emit = defineEmits<EmitType>()
interface PropsType {
    CarMaindata: CarTypes
}


const props = defineProps<PropsType>()
let form = reactive<MainType>({
    license: '',
    annual: '',
    business: '',
    mandatory: '',
    steel: '',
    convey: '',
    maintain: '',
    isFin: false,
})
// 创建支出数据
let formExp = reactive({
    money: 0,
    wechat: 0,
    alipay: 0,
    cash: 0,
    rests: 0,
    time: '',
    descr: '',
    state: '未审核',
    Arrearage: 0,
    isExpen: '支出'

})



const catelist = ref<{ category: string, objectId: string }[]>([])

// 获取维修类型
let res = await CateGet()
catelist.value = res.data.results

// 维护
form = props.CarMaindata

// 计算支出金额
const handleInput = () => {
    let sum = formExp.alipay + formExp.cash + formExp.wechat + formExp.rests
    if (sum >= 0) {
        formExp.money = sum
        formExp.Arrearage = 0
    } else {
        formExp.money = 0
        formExp.Arrearage = Math.abs(sum)

    }
}
const onSubmit = async () => {
    // console.log(form)
    // 新增维护记录
    if (form.isopen) {
        delete form.createdAt
        delete form.updatedAt
        delete form.objectId
        await MainAdd(form)
        if (form.isFin) {
            let type = form.maintain!
            await ExpenPost({ type, ...formExp })
        }
        ElMessage.success('车辆维护成功')
        emit('update:modelValue', false)
    } else {
        ElMessage.error('当前车辆不可用')
        emit('update:modelValue', false)
    }
}

const bool = ref<boolean>(false)
// 开关按钮
const handleChange = (val: boolean) => {
    console.log(val);
    bool.value = val
}
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<ExpenType>>({
    money: [
        { required: true, message: '请输入支出金额', trigger: 'blur' },
    ],
    wechat: [
        { required: true, message: '微信付款', trigger: 'blur' },
    ],
    alipay: [
        { required: true, message: '请输入支出金额', trigger: 'blur' },
    ],
    cash: [
        { required: true, message: '请输入支出金额', trigger: 'blur' },
    ],
    rests: [
        { required: true, message: '请输入支出金额', trigger: 'blur' },
    ],
    time: [
        { required: true, message: '请选择支出时间', trigger: 'blur' },
    ],


})


</script>
  
<style scoped>
.tip-box {
    margin-bottom: 10px;
    padding: 15px;
    line-height: 22px;
    border: 1px solid #e6e6e6;
    border-left: 5px solid #5FB878;
    border-radius: 0 2px 2px 0;
    background-color: white;
}
</style>